<template>
  <header>
    <div class="headMain">
      <h1>张林的个人博客</h1>
      <span>{{ spanText }}</span>
    </div>
    <div class="toCut"><a href="#userInfo">︾</a></div>
  </header>
  <main id="userInfo">
    <div class="leftBox">
      <div class="personInfo">
        <img src="../assets/img.gif" alt="" />
        <span>博主：张林</span>
        <span>本人平时比较懒，没什么东西</span>
        <button @click="message">点击留言</button>
        <div class="links">
          <a href="https://gitee.com/dwadawawwad" target="_blank"
            ><img src="https://gitee.com/favicon.ico" alt=""
          /></a>
          <a href="https://github.com/ZBClqy" target="_blank"
            ><img src="https://github.com/apple-touch-icon-144x144.png" alt=""
          /></a>
          <a href="https://mail.qq.com/" target="_blank"
            ><img src="https://mail.qq.com/favicon.ico" alt=""
          /></a>
        </div>
      </div>
      <div class="Backlinks">
        <h2><span class="iconfont icon-icon-"></span>快速通道</h2>
        <div class="BacklinkBox">
          <div class="boxItem" v-for="item in linksAll" :key="item.id">
            <a :href="item.backlinks"
              ><img :src="item.linksImg" alt="" target="_blank"
            /></a>
            <span>{{ item.backlinksName }}</span>
          </div>
        </div>
      </div>
      <div class="newEssay">
        <h2><span class="iconfont icon-xin"></span>最新文章</h2>
        <div class="EssayList">
          <div
            class="essayItem"
            v-for="item in newList"
            :key="item.id"
            @click="toEssay(item.id, item.title)"
          >
            <img :src="`http://tp.linqiaoyan.top/${item.headImg}`" alt="" />
            <div class="essayContent">
              <h3>{{ item.title }}</h3>
              <div class="essayText">{{ item.addTime }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="rightBox">
      <div class="Content">
        <div
          class="contentItem"
          v-for="item in pageList"
          :key="item.id"
          @click="toEssay(item.id, item.title)"
        >
          <img :src="`http://tp.linqiaoyan.top/${item.headImg}`" alt="" />
          <div class="itemText">
            <h3>{{ item.title }}</h3>
            <p>{{ item.addTime }}</p>
            <div>{{ item.summary }}</div>
          </div>
        </div>
      </div>
      <footer>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="page * 10"
          @next-click="addPager"
          @prev-click="reducePager"
          @current-change="changePager"
        />
      </footer>
    </div>
  </main>
  <loadings v-if="showLoading"></loadings>
  <el-dialog v-model="dialogVisible" title="留言板" id="loadings" width="80%">
    <el-input
      v-model="textarea"
      :rows="5"
      type="textarea"
      placeholder="请留下您宝贵的意见！"
      maxlength="30"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addMessages">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { selectHomeInfo, addMessage } from "@/api/servers";
import loadings from "@/components/BlogLoding.vue";
import { ElMessage } from "element-plus";
import "element-plus/theme-chalk/el-message.css";
export default defineComponent({
  name: "",
  props: {},
  components: {
    loadings,
  },
  setup() {
    let showLoading = ref(true);
    let spanText = ref("");
    let timer = ref();
    let timerTwo = ref();
    let router = useRouter();
    let linksAll = reactive([
      { id: "", backlinksName: "", delete: "", linksImg: "", backlinks: "" },
    ]);
    let pageList = reactive([
      {
        addTime: "",
        delete: "",
        headImg: "",
        id: "",
        summary: "",
        table: "",
        textInfo: "",
        title: "",
      },
    ]);
    let essayList = reactive([
      {
        addTime: "",
        delete: "",
        headImg: "",
        id: "",
        summary: "",
        table: "",
        textInfo: "",
        title: "",
      },
    ]);
    let page = ref(0);
    let newList = reactive([
      {
        addTime: "",
        delete: "",
        headImg: "",
        id: "",
        summary: "",
        table: "",
        textInfo: "",
        title: "",
      },
    ]);

    let pageNumber = ref(0);

    let dialogVisible = ref(false);

    let textarea = ref("");

    onMounted(() => {
      invoke();
    });

    selectHomeInfo().then((response) => {
      linksAll.push(...response?.data.backAll);
      linksAll.shift();
      essayList.push(...response?.data.essayAll);
      essayList.shift();
      page.value = Math.ceil(essayList.length / 4);
      pageList.push(...essayList.slice(0, 4));
      pageList.shift();
      newList.push(...essayList.slice(0, 3));
      newList.shift();
      showLoading.value = false;
    });

    async function typewriter(text: string) {
      let n = 0;
      return await new Promise<void>((resolve, reject) => {
        timer.value = setInterval(() => {
          spanText.value += text.slice(n, n + 1);
          if (n === spanText.value.length) {
            clearInterval(timer.value);
            timerTwo.value = setInterval(() => {
              spanText.value = spanText.value.slice(0, n);
              n--;
              if (n === 0) {
                clearInterval(timerTwo.value);
                return resolve();
              }
            }, 100);
          }
          n++;
        }, 300);
      });
    }

    function invoke() {
      typewriter(" 人生如戏，全靠演技！")
        .then(() => {
          return typewriter("我们总是再看其他人的世界！为什么不提高自己");
        })
        .then(() => {
          return typewriter("好好的学习，天天向上！");
        })
        .then(() => {
          return typewriter("张林的个人博客");
        })
        .then(() => {
          invoke();
        });
    }

    function toEssay(id: string, title: string) {
      router.push({
        name: "Essay",
        params: {
          id: id,
          title: title,
        },
      });
    }

    function addPager() {
      pageNumber.value++;
      for (let i = 0, len = pageList.length; i < len; i++) {
        pageList.shift();
      }
      pageList.push(
        ...essayList.slice(pageNumber.value * 4, pageNumber.value * 4 + 4)
      );
    }

    function reducePager() {
      pageNumber.value--;
      for (let i = 0, len = pageList.length; i < len; i++) {
        pageList.shift();
      }
      pageList.push(
        ...essayList.slice(pageNumber.value * 4, pageNumber.value * 4 + 4)
      );
    }

    function changePager(n: number) {
      pageNumber.value = n - 1;
      for (let i = 0, len = pageList.length; i < len; i++) {
        pageList.shift();
      }
      pageList.push(
        ...essayList.slice(pageNumber.value * 4, pageNumber.value * 4 + 4)
      );
    }

    function message() {
      dialogVisible.value = true;
    }

    function addMessages() {
      addMessage(textarea.value).then((response) => {
        if (response?.data.status === 200) {
          ElMessage({
            message: response.data.message,
            type: "success",
          });
        }
        dialogVisible.value = false;
      });
    }

    return {
      spanText,
      toEssay,
      linksAll,
      pageList,
      page,
      newList,
      showLoading,
      addPager,
      reducePager,
      changePager,
      dialogVisible,
      textarea,
      message,
      addMessages,
    };
  },
});
</script>

<style scoped lang="scss">
@import "@/style/mixin.scss";

header {
  .headMain {
    width: 100vw;
    height: 100vh;
    background-image: url("../assets/homeBack.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    h1 {
      user-select: none;
      font-size: 50px;
      color: white;
    }
    span {
      user-select: none;
      position: absolute;
      display: block;
      color: white;
      font-weight: bold;
      top: 55%;
      border-right: 1px solid rgba(255, 255, 255, 1);
      transition: all 0.5s;
      padding-right: 5px;
      animation: borderRgba 0.5s linear infinite;
    }
  }
  .toCut {
    user-select: none;
    font-size: 50px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    a {
      text-decoration: none;
      color: #fff;
      font-weight: bold;
    }
    animation: upDown 1s linear infinite;
  }
}

main {
  width: 75%;
  margin: 1rem auto;
  display: flex;
  .leftBox {
    user-select: none;
    width: 30%;
    .personInfo {
      @include leftBox;
      height: 45vh;
      justify-content: center;
      img {
        user-select: none;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        box-shadow: 0 0 5px $color;
        cursor: pointer;
        &:hover {
          transition: all 0.5s;
          transform: rotate(360deg);
        }
      }
      span {
        margin-top: 10px;
        font-size: 14px;
        font-weight: bold;
      }
      button {
        user-select: none;
        margin-top: 10px;
        border: none;
        width: 10rem;
        height: 2rem;
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
        &:hover {
          background-color: $color;
          color: #fff;
        }
      }
      .links {
        margin-top: 10px;
        display: flex;
        a {
          margin: 0.5rem;
        }
        img {
          width: 20px;
          height: 20px;
        }
      }
    }
    .Backlinks {
      @include leftBox;
      height: 28vh;
      flex-direction: column;
      margin-top: 1rem;
      h2 {
        user-select: none;
        color: $color;
        margin-bottom: 10px;
      }
      .BacklinkBox {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .boxItem {
          margin: 5px;
          width: 70px;
          height: 70px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          box-shadow: 0 0 5px $color;
          border-radius: 2px;
          img {
            width: 50px;
            height: 50px;
          }
          span {
            font-size: 12px;
            font-weight: bold;
          }
        }
      }
    }
    .newEssay {
      @include leftBox;
      height: 48vh;
      flex-direction: column;
      margin-top: 1rem;
      h2 {
        user-select: none;
        color: #eed045;
        span {
          color: $color;
          font-size: 25px;
          margin-right: 10px;
        }
      }
      .EssayList {
        width: 100%;
        .essayItem {
          cursor: pointer;
          border-radius: 5px;
          display: flex;
          width: 90%;
          height: 12vh;
          margin: 1rem auto;
          box-shadow: 0 0 5px $color;
          img {
            width: 40%;
            height: 100%;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
          }

          .essayContent {
            padding: 5px;
            box-sizing: border-box;
            width: 60%;
            h3 {
              font-size: 16px;
              color: $color;
            }
            .essayText {
              font-size: 11px;
              font-weight: bold;
            }
          }

          &:nth-child(even) {
            flex-direction: row-reverse;
            text-align: left;
          }
        }
      }
    }
  }
  .rightBox {
    width: 70%;
    box-sizing: border-box;
    padding-left: 1rem;
    .Content {
      width: 100%;

      .contentItem {
        cursor: pointer;
        width: 100%;
        height: 25vh;
        box-shadow: 0 0 10px black;
        display: flex;
        margin-bottom: 2rem;
        img {
          width: 40%;
          height: 100%;
          &:hover {
            position: relative;
            width: 45%;
            height: 110%;
            top: -10px;
            left: -10px;
          }
        }
        .itemText {
          width: 60%;
          padding: 10px;
          box-sizing: border-box;
          h3 {
            text-align: center;
            color: $color;
          }
          p {
            font-size: 12px;
            font-weight: bold;
          }
          div {
            padding: 10px;
            font-size: 14px;
            font-weight: bold;
            color: #f1939c;
          }
        }
        &:nth-child(even) {
          flex-direction: row-reverse;
          img {
            width: 40%;
            height: 100%;
            &:hover {
              position: relative;
              width: 45%;
              height: 110%;
              right: -10px;
              left: 0;
            }
          }
          .itemText {
            text-align: left;
          }
        }
      }
    }
    footer {
      height: 9vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

@keyframes borderRgba {
  50% {
    border-right: 1px solid rgba(255, 255, 255, 0);
  }
}

@keyframes upDown {
  50% {
    bottom: 2rem;
  }
}

@media screen and(max-width:1024px ) {
  main {
    flex-direction: column;
    .leftBox {
      width: 100%;
    }
    .rightBox {
      margin-top: 1rem;
      width: 100%;
      padding-left: 0;
    }
  }
}
</style>
